Slider Control

Early in 1997, while Liberty Basic was still in the 1.4 version release, Ryan Jefferies created a simple, all LB native code Slider Control. That slider is still floating around in some LB circles today. It is dated and a bit drab in appearance, but gets the job done.

While creating a game some years back I had need for a nice slider, and turned to the slider control. I thought that with Liberty Basic's new features (at that time version 2.02), I should be able to spruce the slider up a bit.

I tried several approaches to make it look and act better, and finally turned to sprites. They offered less work for me the programmer (as LB takes care of the graphics overhead) and a way to get a good looking slider with a minimum of code.

The recent appearance of twin sliders in the newsletter, along with some conversion work to my LB2 based game, done by Stefan Pendl, had me working on the slider again. It worked "out of the box" with LB3 - that was good news - but some of the scaling of the slider was flaky. I still am not 100% satisfied with the results, but for the most part it seems to work well. Here is a quick screen shot of slider in action:

The program relies on a small bmp image for the "thumb". It is a sprite. Another long, narrow image is used for the slider bar background. The code module is complete and will run as is, but it is intended to be part of a larger project. Use it by pasting the entire unit of code into your program, and then including the two bitmaps in the directory from where your code is executed.

Find all three elements in the zip file archive Slider32.zip (which should be part of the newsletter download).

Using the Slider

As I indicated, you can use the slider in your own projects. Do this by copying the entire code unit from the demo here into your program.

The code has an entry point already for your use. You simply add a gosub statement to your code where you want to open the slider window.

There are two values that you need to set which control the upper and lower bounds of the slider. These appear just inside the routine and look like this:

    SlideMin=0       'Minimum Slider Value (can be positive or negative)
    SlideMax=40      'Maximum Slider Value (a value greater than SlideMin)

I set them to 0 and 40. I also like to test -200 and 200. Nearly any values work, but a range of less than 40 feels a bit strange in operation at the upper and lower ends.

When the slider window opens, the thumb is place in the middle by default. You can relocate the Thumb by replacing the following code as the comment suggests:

    'You can set middle to any valid value you want by replacing this code - this sets the
    'initial location of the thumb in the slider - most common at the Min value, Max value
    'middle value (which is where this code sets it)

    Middle = Int((245-15)/2)+MouseOffset-1   'Center of slider - length of graphic
                                             'window minus slider length
                                             ' divided by two and adjusted by offsets

When integrating this code into your code you will want to change the exit point code. Currently when the window is closed, the program ends. You will need to comment out the END statement and allow the program to execute the RETURN and continue execution of your program.

[slide.END] 'This is the slider exit point.
    Close #slide
    'In the demo I end the program execution.  You will need to comment this out
    'so that the RETURN statement will return program control to your program.
    End
    'Reset the flag that tracks if Slider window is open
    SliderWindow = 0
    Return

Also notice that I set a flag called "SliderWindow" to the value of 1 when the window is opened and then I reset it to the value of zero when the window is closed. You should check this flag in your program when your program is exiting to insure that the slider window was not left open in the background. Close it then if it was. If you do not clean up all your windows when LB exits there will be an error, and users really don't like that sort of stuff.

Finally, this is a more or less reusable code module as it is, but you can with only a little bit more work integrate the slider into your existing forms where needed. You will need to study the supporting routines a little to understand where they go and what they will be doing for you, but the majority of the work is done by the mouseMove function which is completely reusable.

Good luck and have fun.

Full Source Code

I have included the full source code for the demo here for you to view. As I mentioned above, it requires two bitmap images in order to operate correctly. You must download the newsletter archive to get these images. Included with the images is the demo source as well.


'** Example of how to create a SLIDER control
'** Excellent for making an input device with preset ranges
'** Created by Triad Productions
'** Feel free to modify this....
'** For better accuracy you could add arrow buttons on each side
'** of the slider control.. These buttons could increment the
'** Slider Value by a predetermined number..
'------------------------------------------------------------------
'   Original by Ryan Jefferies (circa 1997)
'   Major re-write for Liberty Basic 2.02 and Liberty Basic 3.x.  This
'   version uses two bmp's that should be included in the zip file with
'   this source.  It is sprite based, giving clean, easy graphics.
'
'   by Brad Moore - March 2002, Revised March 2004
'
'   -Again, as Ryan suggested - please use this freely.  It is
'    not intended to be an application unto itself.  Incoporate into
'    your code where ever a slider would enhance the UI.
'
'   I tried to put enough comments into it to help people along.  If
'   you get stuck - give a holler on the LibertyBaisc Forum at
'   http://libertybasic.conforums.com/index.cgi
'
'   This is version 1.01, released 2/9/04 - Brad Moore
'
'   Please consider this open source, I am sure this is the way Ryan
'   intended it to be used and shared in the community.
'
'-------------------------------------------------------------------

[slide.Entry] 'This is the slider entry point - gosub here to use the slider in your code...

    '** Set up critical variables used during program execution **************************
    '
    'Slider real value range - change these minimum and maximum values to allow the slider
    'to select values of different ranges

    SlideMin=0       'Minimum Slider Value (can be positive or negative)
    SlideMax=40      'Maximum Slider Value (a value greater than SlideMin)

    'These variables define the size of the graphicsbox and the way the slider operates

    XMin(1)=0           'Current Cursor X-Min Position
    XMax(1)=13          'Current Cursor X-Max Position

    MouseOffset = 4     'The offset for mouse movement on the graphic bar - improved effect

    'The value 245 is used often here - it is the length of the graphicbox used for the slider

    SLimitMin=0                'Minimum mouse location for left/right travel
    SLimitMax=245-MouseOffset  'Maximum mouse location for left/right travel
    SliderLen=245-MouseOffset  'Actual total pixels of slider area
                               '(graphic box less pointer width and offset)

    'You can set middle to any valid value you want by replacing this code - this sets the
    'intial location of the thumb in the slider - most common at at the Min value, Max value
    'middle value (which is where this code sets it)

    Middle = Int((245-15)/2)+MouseOffset-1   'Center of slider - length of graphic
                                             'window minus slider length
                                             ' divided by two and adjusted by offsets

    'Determine granularity for sliding the thumb - store it in variable called slip
    slip = int(245/(SlideMax-SlideMin))
    if slip < 1 then slip = 1


    'Load the graphics used by the slider application into memory

    LoadBmp "slider", "sliderm.bmp"
    LoadBmp "slide", "slidebar.bmp"

    NoMainWin '<-- You should already have this set in your code, comment this line out

    WindowWidth = 330
    WindowHeight = 110
    'Set the location of the window as centered on the client screen
    UpperLeftX = Int((DisplayWidth-WindowWidth)/2)
    UpperLeftY = Int((DisplayHeight-WindowHeight)/2)

    '** Add Window Controls
    Graphicbox  #slide.Graphicbox1, 35, 25, 245, 20
    Statictext  #slide.StaticText1, "Slider Value=000", 98, 55, 130, 25 'Padded the X Value for unknown length
    Button      #slide.SlideRight, "<",[slide.SlideRightClick],UL, 21, 25, 15, 20
    Button      #slide.SlideLeft, ">",[slide.SlideLeftClick],UL, 280, 25, 15, 20

    '** Display window
    Open "Example:  Slider Control" For Window As #slide

    'Set a flag to track that this window is open
    SliderWindow = 1

    'Trap window and graphic box events
    Print #slide, "TRAPCLOSE [slide.END]"
    Print #slide.Graphicbox1, "when leftButtonUp [slide.LMU]"
    Print #slide.Graphicbox1, "when leftButtonMove [slide.LMM]"

    'Set the window default font
    Print #slide, "font ms_sans_serif 10"

    'Load the sprite backgound into the graphic box
    Print #slide.Graphicbox1, "down;background slide"

    'Load the slider sprite, define it as a sprite and make it visible
    Print #slide.Graphicbox1,"addsprite slider slider";
    Print #slide.Graphicbox1, "spritevisible slider on"

    'Set the intial mouse position to the center of the slider and call function to display
    MouseX = Middle
    'Call mouseMove function to move slider and Display Slider Value
    Print #slide.StaticText1, "Slider Value=";mouseMove(MouseX,SlideMax,SlideMin,_
                                                        SLimitMax,SLimitMin,SliderLen)


[slide.inputLoop] 'Scan for user events
    Wait

[slide.LMU] 'Left Mouse Button Up
    'Call mouseMove function to move slider and Display Slider Value
    Print #slide.StaticText1, "Slider Value=";mouseMove(MouseX,SlideMax,SlideMin,_
                                                        SLimitMax,SLimitMin,SliderLen)
    GoTo [slide.inputLoop] 'Check for more user events

[slide.LMM] 'Left Mouse Move
    'Call mouseMove function to move slider and Display Slider Value
    Print #slide.StaticText1, "Slider Value=";mouseMove(MouseX,SlideMax,SlideMin,_
                                                        SLimitMax,SLimitMin,SliderLen)
    GoTo [slide.inputLoop] 'Check for more user events

[slide.SlideRightClick]
    'Check the bounds for the movement of the slider with the buttons
    If MouseX >= SLimitMax Then
       MouseX = SLimitMax-1
    Else
       MouseX = MouseX - slip
       If MouseX <= 0 Then MouseX = 0
    End If
    'Call mouseMove function to move slider and Display Slider Value
    Print #slide.StaticText1, "Slider Value=";mouseMove(MouseX,SlideMax,SlideMin,_
                                                        SLimitMax,SLimitMin,SliderLen)
    GoTo [slide.inputLoop] 'Check for more user events

[slide.SlideLeftClick]
    'Check the bounds for the movement of the slider with the buttons
    If MouseX <= 0 Then
       MouseX = 1
    Else
       MouseX = MouseX + slip
       If MouseX > SLimitMax Then MouseX = SLimitMax
    End If
    'Call mouseMove function to move slider and Display Slider Value
    Print #slide.StaticText1, "Slider Value=";mouseMove(MouseX,SlideMax,SlideMin,_
                                                        SLimitMax,SLimitMin,SliderLen)
    GoTo [slide.inputLoop] 'Check for more user events

[slide.END] 'This is the slider exit point.
    Close #slide
    'In the demo I end the program execution.  You will need to comment this out
    'so that the RETURN statement will return program control to your program.
    End
    'Reset the flag that tracks if Slider window is open
    SliderWindow = 0
    return

Function mouseMove(MouseX,SlideMax,SlideMin,SLimitMax,SLimitMin,SliderLen)

    'MouseX and MouseY represent cursor coordinates - we ignore MouseY
    'The calculation for the Slider Value is calculated as follows....
    '
    '1) Current MouseX position divided by SliderLen (length of graphicbox minus offset for
    '                           centering pointer) to yeild a percentage.
    '
    '2) SlideMax-SlideMin gives the range of numbers... Which is multiplied by the percentage
    '   to determine a raw number
    '
    '3) Add the value to the minimum range number to determine the actual number

    If MouseX<=SLimitMin Then MouseX=SLimitMin    'Tried to move the mouse too far to the left
    If MouseX>=SLimitMax Then MouseX=SLimitMax    'Tried to move the mouse too far to the right

    Print #slide.Graphicbox1, "spritexy slider ";MouseX-4;" 0"
    Print #slide.Graphicbox1, "drawsprites"

    'Calculate Slider Value - More advanced calculation compensates for slider offset
    TempVar=Int((MouseX/SliderLen)*(SlideMax-SlideMin)+SlideMin)

    mouseMove = TempVar

End Function

Quick Visual Designer